<template>
  <page-meta :root-font-size="fontsize" class="publish-store">
    <xlNavBar :showLeft="true" title="发布招租转店" bgc="ff9d49"></xlNavBar>
    <view class="ps-container">
      <view class="c-info">
        <view class="left">
          <text class="name">房屋租金</text>
          <text class="tag">必填</text>
        </view>
        <view class="right">
          <input
            class="input"
            v-model="publishForm.monthly_rent"
            type="number"
            placeholder="请输入月租金"
          />
          <text class="unit">元/月</text>
        </view>
      </view>
      <view class="c-info">
        <view class="left">
          <text class="name">店铺面积</text>
          <text class="tag">必填</text>
        </view>
        <view class="right">
          <input
            class="input"
            v-model="publishForm.store_area"
            type="number"
            placeholder="请输入"
          />
          <text class="unit">平米</text>
        </view>
      </view>
      <view class="c-info">
        <view class="left">
          <text class="name">店铺地址</text>
          <text class="tag">必填</text>
        </view>
        <view class="right" @click="clickSelectCity">
          <view class="input">
            {{ publishForm.store_address || "选择城市" }}
          </view>
          <i class="iconfont cyjiantouyou"></i>
        </view>
      </view>
      <view class="c-info info-flex">
        <view class="i-item">
          <view class="left">
            <text class="name">是否有转让费</text>
            <text class="tag">必填</text>
            <switch
              :checked="publishForm.is_transfer_fee === 1"
              @change="handleTransferFee(publishForm.is_transfer_fee)"
              color="#FF8822"
              class="switch"
            />
          </view>
          <view class="right">
            <view class="input-btn" v-if="publishForm.is_transfer_fee === 1">
              <input
                placeholder="请输入"
                :disabled="publishForm.is_transfer_fee !== 1"
                v-model="publishForm.transfer_fee"
                type="number"
              />
              <text class="unit">元</text>
            </view>
          </view>
        </view>
        <view class="i-item" v-if="publishForm.is_transfer_fee === 1">
          <view class="left">
            <text class="name">转让费对外展示</text>
          </view>
          <view class="right">
            <view class="switch">
              <view
                class="tab"
                @click="switchTransferFee(1)"
                :class="
                  publishForm.is_show_transfer_fee === 1 ? 'tab-active' : ''
                "
              >
                公开
              </view>
              <view
                class="tab"
                @click="switchTransferFee(0)"
                :class="
                  publishForm.is_show_transfer_fee !== 1 ? 'tab-active' : ''
                "
              >
                面议
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="c-info">
        <view class="left">
          <text class="name">联系电话</text>
          <text class="tag">必填</text>
        </view>
        <view class="right">
          <input
            class="input"
            v-model="publishForm.contact_phone"
            type="number"
            placeholder="请输入联系电话"
          />
          <i class="iconfont cyjiantouyou"></i>
        </view>
      </view>
      <view class="c-info info-flex">
        <view class="left top">
          <text class="name">店铺转让说明</text>
          <text class="tag">必填</text>
        </view>
        <view class="bottom">
          <textarea
            v-model="publishForm.store_highlight"
            @input="handleHighlightInfo"
            placeholder="请输入或者粘贴转让原因，店铺优势等相关内容，越详细转店、招租更快。"
            class="textarea"
            :maxlength="200"
          />
          <text class="tip">{{ publishForm.store_highlight.length }}/200</text>
        </view>
      </view>
      <view class="c-info info-flex">
        <view class="left top">
          <text class="name">上传图片</text>
          <text class="tag other">选填</text>
        </view>
        <view class="bottom">
          <view class="title">上传商铺图片，更直观</view>
          <view class="image-list">
            <view class="info" v-for="item in pictureList" :key="item">
              <image class="image" :src="item" mode="scaleToFill" />
              <i class="delete-icon iconfont cyguanbi" @click="deletePic(index)"></i>
            </view>
            <u-upload
              :previewImage="false"
              width="74px"
              height="74px"
              :fileList="fileList"
              @afterRead="afterRead"
              :multiple="true"
              :maxCount="4"
            >
              <image
                src="@/static/images/common/upload.png"
                mode="widthFix"
                class="upload-image"
              ></image>
            </u-upload>
          </view>
        </view>
      </view>
    </view>

    <view class="ps-operate">
      <!-- <view class="info">
        发布求职信息即表示遵守
        <text
          class="link"
          @click="$togo('/pages3/userAgreement', { type: 'resume' })"
        >
          《餐饮信息网求职信息发布规则》
        </text>
        ，如果违反规则可能导致您的账号异常
      </view> -->
      <view
        class="btn"
        :class="[canPublish ? 'isLight' : '']"
        @click="submitPublish"
      >
        立即发布
      </view>
    </view>

    <selectAddressPopup
      v-if="showCityPopup"
      :info="publishForm"
      @getAddress="getAddress"
      :show="showCityPopup"
      @close="showCityPopup = false"
    ></selectAddressPopup>

    <EditSuccess :show="showEditSuccess"></EditSuccess>

    <u-popup
      top="200"
      v-if="showPublishSuccess"
      :show="true"
      bgColor="transparent"
      mode="center"
      round="10px"
    >
      <view class="publish-success">
        <div class="text">审核通过后将展示该信息</div>
        <div class="info">置顶可提升更多曝光量，转店更快</div>
        <div class="info">用户可免积分与您联系，效率更高</div>
        <div class="operate" @click="submitTop">立即置顶</div>
        <div class="cancel" @click="toManage">暂不置顶</div>
      </view>
    </u-popup>
  </page-meta>
</template>

<script>
import selectAddressPopup from "./components/selectAddressPopup.vue";
import EditSuccess from "./components/editSuccess.vue";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "PublishStore",
  components: {
    selectAddressPopup,
    EditSuccess
  },
  data() {
    return {
      fontsize: "",
      pictureList: [],
      fileList: [],
      showCityPopup: false,
      canPublish: false,
      storeId: null,
      publishForm: {
        monthly_rent: null,
        store_area: null,
        store_address: "",
        is_transfer_fee: 1,
        transfer_fee: null,
        contact_phone: "",
        is_show_transfer_fee: 1,
        store_highlight: "",
        store_image: "",
        longitude: null,
        latitude: null,
        first_area_id: null,
        second_area_id: null,
        third_area_id: null,
        first_area_des: "",
        second_area_des: "",
        third_area_des: "",
        four_area_des: ""
      },
      storeInfo: null,
      showPublishSuccess: false,
      showEditSuccess: false
    };
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"]),
    ...mapGetters("location", ["getUserLocationInfo"])
  },
  watch: {
    publishForm: {
      handler: function (newValue) {
        let canPublish = true;
        if (
          !newValue.monthly_rent ||
          !newValue.store_area ||
          !newValue.store_address ||
          !newValue.contact_phone ||
          !newValue.store_highlight
        ) {
          canPublish = false;
        }
        if (
          newValue.is_transfer_fee === 1 &&
          newValue.is_show_transfer_fee === 1 &&
          !newValue.transfer_fee
        ) {
          canPublish = false;
        }
        this.canPublish = canPublish;
      },
      deep: true
    }
  },
  onLoad(options) {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });

    if (options.id) {
      this.storeId = options.id;
      this.getDetail(options.id);
    } else {
      this.storeId = null;
    }

    if (this.getUserInfo) {
      this.publishForm.contact_phone = this.getUserInfo.phone;
    }

    if (this.getUserLocationInfo) {
      this.publishForm.first_area_des =
        this.getUserLocationInfo.ad_info.province;
      this.publishForm.first_area_id = JSON.parse(
        this.getUserLocationInfo.ad_info.adcode.slice(0, 2) + "0000"
      );
      this.publishForm.second_area_id = JSON.parse(
        this.getUserLocationInfo.ad_info.city_code.slice(3)
      );
      this.publishForm.second_area_des = this.getUserLocationInfo.ad_info.city;
      this.publishForm.third_area_id = JSON.parse(
        this.getUserLocationInfo.ad_info.adcode
      );
      this.publishForm.third_area_des =
        this.getUserLocationInfo.ad_info.district;
      this.publishForm.four_area_des =
        this.getUserLocationInfo.address_reference.town.title;
      this.publishForm.four_area_id = JSON.parse(
        this.getUserLocationInfo.address_reference.town.id
      );

      this.publishForm.latitude = this.getUserLocationInfo.location.lat;
      this.publishForm.longitude = this.getUserLocationInfo.location.lng;
      this.publishForm.store_address =
        this.getUserLocationInfo.ad_info.province +
        this.getUserLocationInfo.ad_info.city +
        this.getUserLocationInfo.ad_info.district +
        this.getUserLocationInfo.address_reference.town.title;
    }
  },
  methods: {
    ...mapActions("user", ["setStatus"]),
    async getDetail(id) {
      let { storefront, code } = await this.$http.requestSync(
        "/storefronts/info/" + id,
        {},
        "GET"
      );
      if (code === 200) {
        this.publishForm = {
          monthly_rent: storefront.monthly_rent,
          store_area: storefront.store_area,
          store_address: storefront.store_address,
          is_transfer_fee: storefront.is_transfer_fee,
          transfer_fee: storefront.transfer_fee * 1,
          contact_phone: storefront.contact_phone,
          is_show_transfer_fee: storefront.is_show_transfer_fee,
          store_highlight: storefront.store_highlight,
          longitude: storefront.longitude,
          latitude: storefront.latitude,
          first_area_id: storefront.first_area_id,
          second_area_id: storefront.second_area_id,
          third_area_id: storefront.third_area_id,
          first_area_des: storefront.first_area_des,
          second_area_des: storefront.second_area_des,
          third_area_des: storefront.third_area_des,
          four_area_des: storefront.four_area_des,
          store_image: storefront.store_image
        };

        this.storeInfo = storefront;
        this.pictureList = storefront.store_image
          ? storefront.store_image.indexOf(",") > -1
            ? storefront.store_image.split(",")
            : [storefront.store_image]
          : [];
      }
    },
    clickSelectCity() {
      this.showCityPopup = true;
    },
    handleTransferFee(free) {
      this.publishForm.is_transfer_fee = free === 1 ? 0 : 1;
      this.publishForm.transfer_fee = "";
    },
    switchTransferFee(free) {
      this.publishForm.is_show_transfer_fee = free;
    },
    getAddress(address) {
      let addressInfo = "";
      for (let key in address) {
        let data = address[key];
        if (!data) {
          continue;
        }
        this.publishForm.latitude = data.location.lat;
        this.publishForm.longitude = data.location.lng;
        addressInfo += data.fullname;
        switch (key) {
          case "province":
            this.publishForm.first_area_des = data.fullname;
            this.publishForm.first_area_id = data.id * 1;
            break;
          case "city":
            this.publishForm.second_area_des = data.fullname;
            this.publishForm.second_area_id = data.id * 1;
            break;
          case "county":
            this.publishForm.third_area_des = data.fullname;
            this.publishForm.third_area_id = data.id * 1;
            break;
          case "street":
            this.publishForm.four_area_des = data.fullname;
            this.publishForm.four_area_id = data.id * 1;
            break;
          default:
            break;
        }
      }
      this.publishForm.store_address = addressInfo;
      this.showCityPopup = false;
    },
    deletePic(index) {
      this.pictureList.splice(index, 1);
			this.fileList.splice(index, 1);
    },
    async afterRead(event) {
      let lists = [].concat(event.file);
      let fLen = this.fileList.length;
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中"
        });
      });
      for (let i = 0; i < lists.length; i++) {
        let res = await this.$http.upload(lists[i]);
        let result = JSON.parse(res);
        if (result.code === 200) {
          this.pictureList.push(result.url);
          let item = this.fileList[fLen];
          this.fileList.splice(
            fLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "上传成功",
              url: result.url
            })
          );
          fLen++;
        } else {
          this.$layer.message("上传失败");
        }
      }
    },
    handleHighlightInfo(){
      let regExp = /1[3-9]\d{9}/g;
      let str = this.publishForm.store_highlight.trim();
      if (regExp.test(str)) {
        //替换所有手机号
        this.publishForm.store_highlight = str.replaceAll(/(\.*)\d{11}(.*)/g, "$1****$2");
        this.$layer.message("店铺转让说明中请勿输入手机号等敏感信息");
      }
    },
    async submitPublish() {
      if (!this.publishForm.monthly_rent) {
        return this.$layer.message("请选择房屋租金");
      }
      if (!this.publishForm.store_area) {
        return this.$layer.message("请选择店铺面积");
      }
      if (!this.publishForm.store_address) {
        return this.$layer.message("请选择工作地址");
      }
      if (!this.publishForm.contact_phone) {
        return this.$layer.message("请输入您的联系电话");
      }
      let regExp = new RegExp("^1[3578]\\d{9}$");
      if (!regExp.test(this.publishForm.contact_phone)) {
        return this.$layer.message("请输入正确的手机号码");
      }
      if (
        this.publishForm.is_transfer_fee === 1 &&
        this.publishForm.is_show_transfer_fee === 1 &&
        !this.publishForm.transfer_fee
      ) {
        return this.$layer.message("请输入转让费");
      }
      if (!this.publishForm.store_highlight) {
        return this.$layer.message("请输入店铺转让说明");
      }
      if (this.pictureList.length > 0) {
        this.publishForm.store_image = this.pictureList.join(",");
      }
    
      let params = {
        ...this.publishForm,
        monthly_rent: this.publishForm.monthly_rent * 1,
        store_area: this.publishForm.store_area * 1,
        transfer_fee: this.publishForm.transfer_fee * 1,
        is_show_transfer_fee: this.publishForm.is_show_transfer_fee * 1,
        user_id: this.$getStoraged("user_id")
          ? JSON.parse(this.$getStoraged("user_id"))
          : ""
      };
      let url = "/storefronts/create";
      if (this.storeId) {
        url = "/storefronts/update";
        params.id = this.storeId * 1;
        params = {
          ...this.storeInfo,
          ...params
        };
      }
      this.$throttle(async () => {
        let res = await this.$http.requestSync(url, params);
        if (res.code === 200) {
          this.setStatus();
          this.storeInfo = res.storefront;
          if (this.storeId) {
            this.showEditSuccess = true;
            return;
          }

          if (!res.storefront.is_buy_top) {
            this.showPublishSuccess = true;
          }
        } else {
          this.$layer.message(res.message);
        }
      });
    },
    submitTop() {
      let city = this.getCityInfo();
      this.$redirectTo(
        `/shopPackage/topStore?id=${this.storeInfo.id}&city=${city}`
      );
    },
    getCityInfo() {
      let province = this.storeInfo.first_area_des;
      let cityList = ["北京市", "天津市", "上海市", "重庆市"];
      if (cityList.includes(province)) {
        return province;
      }
      return this.storeInfo.second_area_des;
    },
    toManage() {
      this.$redirectTo("/shopPackage/manageStore");
    }
  }
};
</script>

<style scoped lang="scss">
.publish-store {
  position: relative;
  width: 100vw;
  background: #f7f7f7;
  display: block;
  .ps-container {
    padding: 10px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    .c-info {
      width: 100%;
      padding: 20px 10px;
      margin-bottom: 10px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.info-flex {
        flex-direction: column;
        align-items: initial;
        .i-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .i-item:first-child {
          margin-bottom: 20px;
        }
      }
      .left {
        display: flex;
        align-items: center;
        .name {
          line-height: 15px;
          font-weight: 600;
          font-size: 15px;
        }
        .tag {
          height: 16px;
          line-height: 16px;
          padding: 0 4px;
          margin-left: 8px;
          border-radius: 8px 8px 8px 2px;
          background: rgba(230, 99, 99, 0.15);
          font-size: 10px;
          color: #e66363;
          &.other {
            background: rgba(153, 153, 153, 0.15);
            color: #999999;
          }
        }
        .switch {
          margin-left: 4px;
          transform: scale(0.7);
        }
      }
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #333333;
        .input {
          text-align: right;
          font-size: 12px;
          margin-right: 6px;
        }
        .unit {
          font-size: 15px;
        }
        .iconfont {
          width: 16px;
          height: 16px;
          color: #d3d3d3;
        }
        .input-btn {
          display: flex;
          align-items: center;
          height: 40px;
          border-radius: 6px;
          background: #fafafa;
          border: 1px solid #e8e8e8;
          padding: 0 10px;
          .unit {
            width: 60px;
            font-size: 15px;
          }
        }
        .switch {
          width: 104px;
          height: 28px;
          display: flex;
          align-content: center;
          justify-content: center;
          background: #efefef;
          border-radius: 14px;
          line-height: 28px;
          .tab {
            height: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999999;
            &.tab-active {
              border-radius: 14px 14px 14px 14px;
              background: #ff8822;
              color: #ffffff;
            }
          }
        }
      }
      .top {
        align-items: flex-start;
      }
      .bottom {
        position: relative;
        margin-top: 12px;
        .textarea {
          background: #fafafa;
          border-radius: 6px;
          border: 1px solid #e8e8e8;
          min-height: 100px;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          font-size: 14px;
        }
        .tip {
          position: absolute;
          right: 10px;
          bottom: 5px;
          font-size: 12px;
          color: #bfbfbf;
        }
        .title {
          font-size: 12px;
          color: #999999;
        }
        .image-list {
          display: flex;
          .info {
            width: 74px;
            height: 74px;
            border-radius: 8px;
            margin: 10px 10px 0 0;
            overflow: hidden;
            position: relative;
            .image {
              width: 100%;
              height: 100%;
            }
            .delete-icon {
              position: absolute;
              top: 0px;
              right: 0px;
              width: 20px;
              height: 20px;
              font-size: 8px;
              text-align: center;
              background: #00000039;
              padding-top: 4px;
              box-sizing: border-box;
              border-bottom-left-radius: 100px;
            }
          }
          .upload-image {
            margin-top: 10px;
            width: 76px;
            height: 76px;
          }
        }
      }
    }
  }
  .ps-operate {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #f7f7f7;
    .info {
      font-size: 12px;
      color: #999999;
      width: 100%;
      box-sizing: border-box;
      padding: 13px 40px 11px 40px;
      line-height: 16px;
      .link {
        color: #ff8822;
      }
    }
    .btn {
      width: 300px;
      height: 42px;
      background: #fbbf8c;
      border-radius: 21px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 42px;
      margin: 0 auto;
      &.isLight {
        background: #ff8822;
      }
    }
  }

  .publish-success {
    height: 320px;
    width: 268px;
    background: url("https://canyinxinxi.cn/system_work/publish-bg.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .text {
      margin-top: 95px;
      padding: 0 20px;
      font-size: 12px;
      color: #999999;
    }
    .info {
      margin: 0 auto;
      margin-top: 10px;
      width: 226px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: rgba(247, 106, 106, 0.15);
      border-radius: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #f76a6a;
    }
    .content {
      width: calc(100% - 24px);
      margin: 0 auto;
      margin-top: 10px;
      padding: 0 12px;
      line-height: 20px;
      font-size: 15px;
      color: #333333;
      text-align: center;
    }
    .operate {
      margin: 0 auto;
      margin-top: 20px;
      width: 245px;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      border-radius: 20px;
      font-weight: 600;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
    }
    .cancel {
      margin: 0 auto;
      margin-top: 16px;
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>
